<script setup lang="ts">
/** Bootstrap 5.3 Toggle Dark mode */
import { watch } from 'vue';

import { useDark, useToggle } from '@vueuse/core';

const isDark = useDark();
const toggleDark = useToggle(isDark);

watch(
  () => isDark.value,
  dark =>
    document.documentElement.setAttribute(
      'data-bs-theme',
      dark ? 'dark' : 'light'
    )
);
</script>

<template>
  <a href="#" aria-label="Toggle Dark Mode" @click="toggleDark()">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      fill="currentColor"
      class="bi bi-circle-half"
      viewBox="0 0 16 16"
    >
      <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
    </svg>
  </a>
</template>
